<template>
  <div class="honor-approve">
    <el-form :inline="true" class="search-form">
      <el-form-item label="学号" style="width: 200px">
        <el-input v-model="searchForm.studentNumber" placeholder="请输入学号" />
      </el-form-item>
      <el-form-item label="荣誉级别" style="width: 200px">
        <el-select v-model="searchForm.level" placeholder="选择荣誉级别">
          <el-option
            v-for="item in honorLevels"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" style="width: 200px">
        <el-select v-model="searchForm.status" placeholder="选择审核状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="honorList" border>
      <el-table-column prop="studentNumber" label="学号" width="120" />
      <el-table-column prop="studentName" label="姓名" width="100" />
      <el-table-column prop="name" label="荣誉名称" min-width="150" />
      <el-table-column prop="level" label="荣誉级别" width="100">
        <template #default="scope">
          <el-tag :type="getLevelType(scope.row.level)">
            {{ getHonorLevelName(scope.row.level) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="issuer" label="颁发单位" width="150" />
      <el-table-column prop="applyTime" label="申请时间" width="180" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleView(scope.row)"
          >
            查看
          </el-button>
          <el-button
            size="small"
            type="success"
            :disabled="scope.row.status !== 0"
            @click="handleApprove(scope.row)"
          >
            通过
          </el-button>
          <el-button
            size="small"
            type="danger"
            :disabled="scope.row.status !== 0"
            @click="handleReject(scope.row)"
          >
            拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="荣誉详情"
      width="600px"
    >
      <div class="honor-detail">
        <div class="detail-item">
          <span class="label">荣誉名称：</span>
          <span>{{ currentDetail.name }}</span>
        </div>
        <div class="detail-item">
          <span class="label">获奖学生：</span>
          <span>{{ currentDetail.name }} ({{ currentDetail.studentName }})</span>
        </div>
        <div class="detail-item">
          <span class="label">荣誉级别：</span>
          <span>{{ getHonorLevelName(currentDetail.level) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">颁发单位：</span>
          <span>{{ currentDetail.issuer }}</span>
        </div>
        <div class="detail-item">
          <span class="label">获奖时间：</span>
          <span>{{ currentDetail.applyTime }}</span>
        </div>
        <div class="detail-item">
          <span class="label">审核意见：</span>
          <span>{{ currentDetail.auditOpinion }}</span>
        </div>
<!--        <div class="detail-item">-->
<!--          <span class="label">荣誉描述：</span>-->
<!--          <p class="description">{{ currentDetail.description }}</p>-->
<!--        </div>-->
<!--        <div class="detail-item">-->
<!--          <span class="label">证书图片：</span>-->
<!--          <div class="image-list">-->
<!--            <el-image-->
<!--              v-for="(url, index) in currentDetail.images"-->
<!--              :key="index"-->
<!--              :src="url"-->
<!--              :preview-src-list="currentDetail.images"-->
<!--              fit="cover"-->
<!--              class="cert-image"-->
<!--            />-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog
      v-model="auditDialogVisible"
      :title="auditType === 'approve' ? '通过审核' : '拒绝申请'"
      width="500px"
    >
      <el-form :model="auditForm" label-width="100px">
        <el-form-item label="审核意见">
          <el-input
            v-model="auditForm.auditOpinion"
            type="textarea"
            rows="4"
            placeholder="请输入审核意见"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="auditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAudit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getHonorList, auditHonor } from '../../../api/honor'

const searchForm = reactive({
  studentNumber: '',
  level: '',
  status: ''
})

const honorLevels = [
  { label: '国家级', value: '国家级' },
  { label: '��级', value: '省级' },
  { label: '市级', value: '市级' },
  { label: '校级', value: '校级' }
]

const statusOptions = [
  { label: '待审核', value: 0 },
  { label: '已通过', value: 1 },
  { label: '已拒绝', value: 2 }
]

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 表格数据
const honorList = ref([])
const loading = ref(false)

// 详情对话框
const detailDialogVisible = ref(false)
const currentDetail = ref({})

// 审核对话框
const auditDialogVisible = ref(false)
const auditType = ref('')
const auditForm = reactive({
  id: '',
  status: -1,
  auditOpinion: ''
})

// 获取列表数据
const getList = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      ...searchForm
    }
    const res = await getHonorList(params)
    honorList.value = res.records
    total.value = res.total
  } catch (error) {
    ElMessage.error('获取数据失败：' + error.message)
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  getList()
}

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  handleSearch()
}

// 查看详情
const handleView = (row) => {
  currentDetail.value = row
  detailDialogVisible.value = true
}

// 审核操作
const handleApprove = (row) => {
  auditType.value = 'approve'
  auditForm.id = row.id
  auditForm.status = 1
  auditDialogVisible.value = true
}

const handleReject = (row) => {
  auditType.value = 'reject'
  auditForm.id = row.id
  auditForm.status = 2
  auditDialogVisible.value = true
}

// 提交审核
const submitAudit = async () => {
  try {
    await auditHonor(auditForm)
    ElMessage.success('操作成功')
    auditDialogVisible.value = false
    getList()
  } catch (error) {
    ElMessage.error('操作失败：' + error.message)
  }
}

// 工具方法
const getLevelType = (level) => {
  const types = {
    national: 'danger',
    provincial: 'warning',
    city: 'success',
    school: 'info'
  }
  return types[level] || 'info'
}

const getHonorLevelName = (level) => {
  const levelMap = {
    national: '国家级',
    provincial: '省级',
    city: '市级',
    school: '校级'
  }
  return levelMap[level] || level
}

const getStatusLabel = (status) => {
  const statusMap = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝'
  }
  return statusMap[status] || '未知状态'
}

const getStatusType = (status) => {
  const types = {
    0: 'warning',  // 待审核显示黄色
    1: 'success',  // 已通过显示绿色
    2: 'danger'    // 已拒绝显示红色
  }
  return types[status] || 'info'
}

// 分页操作
const handleSizeChange = (val) => {
  pageSize.value = val
  getList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getList()
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.honor-approve {
  margin-top: 20px;
}
.search-form {
  margin-bottom: 20px;
}
.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
.honor-detail {
  padding: 20px;
}
.detail-item {
  margin-bottom: 15px;
}
.label {
  font-weight: bold;
  margin-right: 10px;
  color: #606266;
}
.description {
  margin: 10px 0;
  color: #606266;
  line-height: 1.6;
}
.image-list {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.cert-image {
  width: 120px;
  height: 80px;
  border-radius: 4px;
}
</style>
